<script setup>
import * as echarts from 'echarts'
import { getPic } from '../methods/ESGdataPic.js'
import { getOpt } from '../methods/ESGdataPin.js'
import { selectIndex } from '../api/get/indexData'
</script>

<template>
    <el-card style="height:99% ;">
        <el-space style="width:100% ;" fill :fillRatio="80" wrap>
            <el-card class="box-card" style="background:fixed ghostwhite;" shadow="hover">
                <el-space fill :size="60">
                    <div>
                        <h3 style="margin-top:0">
                            <el-icon>
                                <User />
                            </el-icon>管理员{{$store.state.user.username}}，你好。欢迎使用E企查后台管理系统
                        </h3>
                        <span>{{pageData.page_data[0].sentence}}</span>
                    </div>
                </el-space>
            </el-card>

            <el-space style="width:100% ;margin-top: 30px;" :size="60">

                <el-space fill style="width:200px ;" :size="30">
                    <el-card shadow="hover" style="background:fixed rgb(233,237,242);" class="user_card">
                        <el-icon>
                            <UserFilled />
                        </el-icon>用户总量：<br>

                        <h3 style="margin-bottom:0">{{pageData.users}}</h3>
                    </el-card>
                </el-space>


                <el-space fill style="width:200px ;" :size="30">
                    <el-card shadow="hover" style="background:fixed rgb(233,237,242);" class="user_card">
                        <el-icon>
                            <UserFilled />
                        </el-icon>会员总量：<br>

                        <h3 style="margin-bottom:0">{{pageData.vips}}</h3>
                    </el-card>
                </el-space>

                <el-space fill style="width:200px ;" :size="30">
                    <el-card shadow="hover" style="background:fixed rgb(233,237,242);" class="user_card">
                        <el-icon>
                            <UserFilled />
                        </el-icon>公司总量：<br>

                        <h3 style="margin-bottom:0">{{pageData.companys}}</h3>
                    </el-card>
                </el-space>

                <el-space fill style="width:200px ;" :size="30">
                    <el-card shadow="hover" style="background:fixed rgb(233,237,242);" class="user_card">
                        <el-icon>
                            <UserFilled />
                        </el-icon>数据总量：<br>
                        <h3 style="margin-bottom:0">{{pageData.datas}}</h3>
                    </el-card>
                </el-space>

                <el-space fill style="width:200px ;" :size="30">
                    <el-card shadow="hover" style="background:fixed rgb(233,237,242);" class="user_card">
                        <el-icon>
                            <UserFilled />
                        </el-icon>ESG数据量：<br>
                        <h3 style="margin-bottom:0">{{pageData.esgs}}</h3>
                    </el-card>
                </el-space>
            </el-space>

            <el-space :size="30" alignment="flex-end" style="margin-top:30px">
                <el-card shadow="hover">
                    <template #header>
                        ESG数据曲线图
                    </template>
                    <div id="pic" style="width:350px;height:300px"></div>
                </el-card>

                <el-card shadow="hover">
                    <template #header>
                        ESG数据饼图
                    </template>
                    <div id="pin" style="width:350px;height:300px"></div>
                </el-card>

                <div style="text-align:right ;">
                    <el-space style="margin:10px auto ;">
                        <el-card shadow="hover">
                            今日心情：
                            <img :src="pageData.page_data[0].img" width=60 height=60 alt="">
                        </el-card>
                    </el-space>
                    <el-card shadow="hover">
                        <template #header>
                            <scan>最新esg数据</scan>
                        </template>

                            <el-scrollbar height="200px">
                                <el-space direction="vertical">
                                    <el-card v-for="num in 10" :key="num" style="width:350px;height:60px;text-align: left;">
                                        esg数据{{num}}
                                    </el-card>
                                </el-space>
                            </el-scrollbar>
                    </el-card>
                </div>
            </el-space>
        </el-space>
    </el-card>
</template>



<script>
export default {
    // props: ['pageData'],
    data() {
        return {
            pageData: this.$store.state.index_data,
            data_size: 2
        }
    }, methods: {
        getLinePic() {
            let myChart = this.echarts.init(document.getElementById('pic'), null, {
                width: 350,
                height: 300
            });

            myChart.setOption(getPic())
        },
        getPinPic() {
            let myChart = this.echarts.init(document.getElementById('pin'), null, {
                width: 350,
                height: 300
            });

            myChart.setOption(getOpt())
        }, load() {
            this.data_size += 2
        }

    }, mounted() {
        this.getLinePic()
        this.getPinPic()


        console.log(this.pageData)
    }
}
</script>



